<script setup>
import { onMounted,reactive,ref } from 'vue'
import {storeToRefs } from 'pinia';
import {useBanner} from '../../stores/bannerStore'

const store = useBanner();
const { banlist }  = storeToRefs(store)
onMounted(() =>{
    store.handleBanner();
})

const visible = ref(false)

const addBanner = () => {
    visible.value = true
}

const formData = reactive({
    img:'',
    alt:'',
    link:''
})

// 确定提交
const formdetermine = async() => {
    visible.value = false
    await store.handleAdd(formData)
    formData.img=''
    formData.alt=''
    formData.link=''
}
// 取消提交
const formcancel = () => {
    visible.value = false
}
// 删除
const confirmClick = (id) => {
    console.log('确认');
    store.handleDel(id)
}

const cancelClick = ( ) => {
    console.log('取消');
}

// 上线
const flagChange = async(val,id,flag) => {
    flag = val
    await store.handleFlag(id,flag)
    console.log(val);
}
</script>

<template>
    <el-button type="primary" @click="addBanner">新增轮播图</el-button>

    <el-dialog v-model="visible" title="添加轮播图" width="30%" draggable>
        <el-form
            :model="formData"
        >
            <el-form-item>
            <el-input v-model="formData.img" placeholder="图片"/>
            </el-form-item>
            <el-form-item>
            <el-input v-model="formData.alt"  placeholder="提示信息"/>
            </el-form-item>
            <el-form-item>
            <el-input v-model="formData.link"  placeholder="链接地址"/>
            </el-form-item>
        </el-form>
        <template #footer>
        <span class="dialog-footer">
            <el-button @click="formcancel">取消</el-button>
            <el-button type="primary" @click="formdetermine">确定</el-button>
        </span>
        </template>
    </el-dialog>

    <el-table :data="banlist" class="table" style="width: 100%">
        <el-table-column label="图片">
            <template #default="scope">
                <el-image :src="scope.row.img" />
            </template>
        </el-table-column>
        <el-table-column prop="alt" label="提示信息"/>
        <el-table-column label="链接地址">
            <template #default="scope">
                <a :href="scope.row.link">链接</a>
            </template>
        </el-table-column>
        <el-table-column label="上线">
            <template #default="scope">
                <el-switch
                    :model-value="scope.row.flag"
                    style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                    inline-prompt
                    :active-value="true"
                    :inactive-value="false"
                    @change="(val) => flagChange(val,scope.row.bannerid,scope.row.flag)"
                />
            </template>
        </el-table-column>
        <el-table-column label="操作" prop="bannerid">
            <template #default="scope">
                <el-popconfirm 
                confirmClick
                title="确定要删除吗?"
                @confirm="confirmClick(scope.row.bannerid)"
                @cancel="cancelClick"
                >
                    <template #reference>
                        <el-button type="danger" circle>
                            <el-icon ><Delete /></el-icon>
                        </el-button>
                    </template>
                </el-popconfirm>
            </template>
        </el-table-column>
    </el-table>
</template>

<style scoped lang="scss">

.table{
    height: 85%;
}
</style>